<template>
	<view class="content">
		<view class="hei20"></view>
		<view class="wid90 mar bacFFF borRad20 " @click="tiaozhuan('/pages/commodity/address?biaoji=1')"
			style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);height: 141rpx;">
			<view class="dis disAl disJuB wid90 mar hei100">
				<view class="dis disAl">
					<uni-icons size="42rpx" color="#37BCC3" type="location"></uni-icons>
					<view v-if="!address" class="mar-left20 foSi30">请选择收货地址</view>
					<view v-if="address" class="mar-left20">
						<view class="dis disAl ">
							<view class="foSi40 fowe600" style="line-height: 40rpx;">{{address.name}}</view>
							<view class="foSi30 fowe600 mar-left30" style="color: #737373;">{{address.phone}}</view>
						</view>
						<view class="mar-top20 foSi25 overflowHidden yclh" style="color: #737373;width: 520rpx;">{{address.address+address.content}}</view>
					</view>
				</view>
				<uni-icons type="right" size="38rpx"></uni-icons>
			</view>
		</view>
		<view class="wid90 mar bacFFF borRad20 mar-top30" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);">
			<block v-for="(item,index) in list" :key="index">
				<view class="wid90 mar dis disAl disJuB" style="padding: 30rpx 0;">
					<view class="wid25" style="height: 120rpx;">
						<image :src="url+item.goods_pic" style="width: 120rpx;" class="hei100"></image>
					</view>
					<view style="width: 75%;">
						<view class="foSi30 fowe600 yclh">{{item.goods_name}}</view>
						<view class="foSi25 mar-top10">×{{item.nums}}</view>
						<view class="foSi35 fowe600" style="text-align: right;color: #37BCC3;">¥{{item.money}}</view>
					</view>
				</view>
				<view class="wid100" style="border-bottom: 1rpx dashed #E1DFDF;"></view>
			</block>
			<view class="wid90 mar foSi25 mar-top10" style="padding: 30rpx 0;">
				<view class="dis disAl disJuB ">
					<view>运费</view>
					<view style="color: #8B8B8B;">¥{{freight}}</view>
				</view>
				<view class="dis disAl disJuB mar-top30">
					<view>优惠券</view>
					<view v-if="array.length == 0" style="color: #8B8B8B;">暂无可用券</view>
					 <!-- :range-key="" -->
					<picker v-if="array.length > 0" @change="bindPickerChange" :value="arrayIndex" :range="array" :range-key="'name'" >
						<view class="dis disAl">
							<view style="color: #8B8B8B;">{{arrayIndex?array[arrayIndex].name:'请选择优惠券'}}</view>
							<uni-icons type="right" size="35rpx" color="#8B8B8B;"></uni-icons>
						</view>
					</picker>
				</view>
				<view class="dis disAl disJuB mar-top30">
					<view>备注</view>
					<input class="foSi25" style="text-align: right;color: #8B8B8B;" v-model="text" placeholder="请输入留言内容" placeholder-style="color: #8B8B8B;"/>
				</view>
			</view>
		</view>
		<view class="mar-top20 wid90 mar borRad20 bacFFF" style="padding: 20rpx 0;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);">
			<view class="wid90 mar">
				<view class="dis disAl disJuB hei80" @click="pay = 0">
					<view class="dis disAl">
						<image src="../../static/zhifu.png" style="width: 44rpx;height: 39rpx;"></image>
						<view class="mar-left20">微信支付</view>
					</view>
					<radio color="#2F54EB" :checked="pay == 0" style="transform:scale(0.7)"/>
				</view>
				<view v-if="balance_status != 0" class="dis disAl disJuB hei80" @click="pay = 1">
					<view class="dis disAl">
						<image src="../../static/yue1.png" style="width: 44rpx;height: 39rpx;"></image>
						<view class="mar-left20">余额支付</view>
					</view>
					<radio color="#2F54EB" :checked="pay == 1" style="transform:scale(0.7)"/>
				</view>
			</view>
		</view>
		<view style="height: 150rpx;" :style="'padding-bottom: '+(bottomHight - 20)+'px;'"></view>
		<view class="wid100 bacFFF poFix" style="bottom: 0;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.2);">
			<view class="dis disAl disJuB wid90 mar" style="height: 120rpx;">
				<view class="foSi35 fowe600">总计：<span style="color: #37BCC3;">¥{{(Number(money)+Number(freight)-arrayMoney).toFixed(2)}}</span></view>
				<view class="hei60 borRad40 dis disAl disJuC foSi30 coFFF" @click="dingyue()"
					style="background-color: #37BCC3;width: 210rpx;">立即结算</view>
			</view>
			<view v-if="bottomHight != 0" :style="'height: '+(bottomHight - 10)+'px;'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				bottomHight: 0,
				id: '',
				address: '',
				text: '',
				array: [],
				arrayIndex: null,
				is_pd: 0,
				list: [],
				money: 0,
				arrayMoney: 0,
				freight: 0,
				pay: 0,
				piece_num: 0
			}
		},
		onLoad(option) {
			let app = uni.getSystemInfoSync();
			this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
			this.id = option.id
			this.is_pd = option.is_pd
			this.getList()
		},
		onShow() {
			let that = this
			uni.$on('addressClick',function(data,biaoji){
				that.address = data
				console.log('监听到事件来自 updateData ，携带参数为：' + data);
			})
		},
		methods: {
			 bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				if(this.array.length > 0){
					this.arrayIndex = e.detail.value
					this.arrayMoney = this.array[this.arrayIndex].coupon.money
				}
			},
			getCoupon(){
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_pay_coupon_list',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token')
					},
					data: {
						'gas_station_id': uni.getStorageSync('jiaId'),
						'order_money': that.money,
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.arrayIndex = null
							var list = result.data
							for (var i = 0; i < list.length; i++) {
								list[i].name = list[i].coupon.title
							}
							console.log(list)
							that.array = list
						}
					}
				});
			},
			getList(){
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_dzf_pay_order_info',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token')
					},
					data: {
						id: that.id,
						is_pd: that.is_pd
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.list = result.data.goods_info
							that.money = result.data.money
							that.freight = result.data.freight
							that.piece_num = result.data.piece_num
							that.getCoupon()
						}
					}
				});
			},
			dingyue() {
				var that = this
				// 要检查的订阅id
				let id = uni.getStorageSync('tzId').payment_template
				let id1 = uni.getStorageSync('tzId').integral_variation_template
				let id2 = uni.getStorageSync('tzId').refund_template
				// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
				wx.getSetting({
					withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
					success: function(res) {
						// 调起授权界面弹窗
						// if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
						// 	if (res.subscriptionsSetting.itemSettings !=
						// 		null) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
						// 		that.zhifu()
						// 	} else {
								// 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
								wx.showModal({
									title: '提示',
									content: '请授权开通服务通知',
									showCancel: true,
									success: function(ress) {
										if (ress.confirm) {
											wx.requestSubscribeMessage({ // 调起消息订阅界面
												tmplIds: [id,id1,id2],
												success(res) {
													console.log('订阅消息 成功 ');
													console.log(res);
													that.zhifu()
												},
												fail(er) {
													console.log("订阅消息 失败 ");
													console.log(er);
													that.zhifu()
												}
											})
										}
									}
								})
						// 	}
						// } else {
						// 	console.log('订阅消息未开启')
						// 	that.zhifu()
						// }
					},
					fail: function(error) {
						console.log(error);
						that.zhifu()
					},
				})
			},
			zhifu(){
				let that = this
				var userinfo = uni.getStorageSync('userinfo')
				if(that.pd){
					return;
				}
				if(!that.address){
					return uni.showToast({
						title: '请选择收货地址',
						icon: 'none',
						duration: 2000
					}) 
				}
				that.pd = true
				uni.showLoading({
					title:'支付中...'
				})
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_pay',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token')
					},
					data: {
						pay_type: that.pay,
						gas_station_id: uni.getStorageSync('jiaId'),
						coupon_log_id: that.arrayIndex?that.array[that.arrayIndex].id:0,
						coupon_money: that.arrayMoney.toFixed(2),
						total_amount: (Number(that.money) + Number(that.freight)).toFixed(2),
						discount_amount: that.arrayMoney.toFixed(2),
						pay_amount: (Number(that.money) + Number(that.freight) - that.arrayMoney).toFixed(2),
						order_type: 1,
						address_give: that.address.id,
						goods_info: JSON.stringify(that.list),
						remarks: that.text,
						piece_num: that.piece_num,
						freight: that.freight,
						is_pd: that.is_pd
					},
					success: (res) => {
						let result = res.data
						console.log(result)
						if(that.pay == 1){
							if(result.code==1){
								uni.showModal({
									title: '提示',
									content: '支付成功',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											setTimeout(function(){
												uni.navigateTo({
													url: '/pages/order/order2',
												});	
											},1000)
										}
									}
								})
							}else{
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								})
							}
						}else{
							uni.requestPayment({
								timeStamp: result.timeStamp,
								nonceStr: result.nonceStr,
								package: result.package,
								signType: 'MD5',
								paySign: result.paySign,
								success: function (res) {
									console.log(res);
									uni.showModal({
										title: '提示',
										content: '支付成功',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												setTimeout(function(){
													uni.navigateTo({
														url: '/pages/order/order2',
													});	
												},1000)
											}
										}
									})
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
										// 支付失败
									console.log(err)
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000
									})
								}
							});
						}
					},
					complete() {
						uni.hideLoading()
						that.pd = false
					}
				});
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {}
</style>
